<template>
  <div class="user-info">
    <el-dialog :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    top="10%"
    title="账户信息" v-model="dialogVisible" size="small">
      <div class="user-info__form">
          <p class="tip">
            提示： 为了保障您账户的安全， 请完善账号账户信息后，重新登录系统，更新后的账户信息将通过邮件发送至您的邮箱
          </p>
          <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm" >
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="公司名称" prop="companyName">
                  <el-input v-model="ruleForm.companyName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="账户名称" prop="name">
                  <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="密码" prop="password">
                  <el-input v-model="ruleForm.password"></el-input>
                </el-form-item>
              </el-col> -->

              <el-col :span="12">
                <el-form-item label="联系人姓名" prop="linkManName">
                  <el-input v-model="ruleForm.linkManName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人电话" prop="linkManPhone">
                  <el-input v-model="ruleForm.linkManPhone"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人邮箱" prop="linkManEmail">
                  <el-input v-model="ruleForm.linkManEmail"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="行业">
                <el-row :gutter="30">
                  <el-col :span="12">
                   <el-select v-model="ruleForm.hierarchy1" placeholder="请选择行业">
                    <el-option v-for="item in hierarchy1" :label="item.name" :key="item._id" :value="item._id"></el-option>
                  </el-select>
                  </el-col>
                  <el-col :span="12" class="mar-l">
                    <el-select v-model="ruleForm.hierarchy2" placeholder="请选择行业">
                      <el-option v-for="item in hierarchy2" :label="item.name" :key="item._id" :value="item._id"></el-option>
                    </el-select>
                  </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="公司简介">
                  <el-input type="textarea" v-model="ruleForm.memo"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">{{$t('public.save')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'ChangeUserInfoDailog',
    data () {
      var validatePhone = (rule, value, callback) => {
        if (value && /^1(3|4|5|7|8)\d{9}$/.test(value)) {
          callback()
        } else if (value) {
          callback(new Error('请输入正确的电话号码'))
        } else {
          callback(new Error('联系人电话不能为空'))
        }
      }
      var validateEmail = (rule, value, callback) => {
        if (value && /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(value)) {
          callback()
        } else if (value) {
          callback(new Error('请输入正确的邮箱'))
        } else {
          callback(new Error('联系人邮箱不能为空'))
        }
      }
      var validateName = (rule, value, callback) => {
        if (value && /^[A-Za-z0-9.\-_]+$/.test(value)) {
          this.$store.dispatch('checkAccountName', {name: value}).then(req => {
            if (req.isRepeat) {
              callback(new Error('账户名重复，请修改'))
            } else {
              callback()
            }
          })
        } else if (value) {
          callback(new Error('账户名是以字母和数字组合'))
        } else {
          callback(new Error('用户名不能为空'))
        }
      }
      var validatePassword = (rule, value, callback) => {
        if (!value) {
          callback(new Error('密码不能为空'))
        }
        if (value && /^(?=.*[a-zA-Z])(?=.*[0-9])[a-zA-Z0-9]{8,}$/.test(value)) {
          callback()
        } else {
          callback(new Error('密码必须为六位以上由字母数字组成'))
        }
      }
      return {
        dialogVisible: false,
        ruleForm: {
          companyName: '',
          name: '',
          linkManName: '',
          linkManEmail: '',
          linkManPhone: '',
          hierarchy1: '',
          hierarchy2: '',
          // password: '',
          memo: ''
        },
        industry: [],
        hierarchy1: '',
        rules: {
          companyName: [
            { required: true, message: '请输入公司名称', trigger: 'blur' }
          ],
          name: [
            { required: true, validator: validateName, trigger: 'blur' }
          ],
          linkManPhone: [
            { required: true, validator: validatePhone, trigger: 'blur' }
          ],
          linkManEmail: [
            { required: true, validator: validateEmail, trigger: 'blur' }
          ],
          password: [
            { required: true, validator: validatePassword, trigger: 'blur' }
          ],
          linkManName: [
            { required: true, message: '联系人姓名不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    computed: {
      hierarchy2 () {
        let chy2 = this.industry.hierarchy2 || []
        return chy2.filter(val => val.parent === this.ruleForm.hierarchy1) || []
      }
    },
    methods: {
      submit () {
        let req = {
          exten: this.$store.state.session.user.exten,
          _id: this.$store.state.session.account.account,
          ...this.ruleForm
        }
        this.$store.dispatch('updateAccountByHuaWei', req).then(res => {
          this.dialogVisible = false
          this.$router.replace({path: '/login'})
        })
      }
    },
    beforeMount () {
      this.$store.dispatch('getIndustryDic', {}).then((industry) => {
        this.industry = industry
        this.hierarchy1 = this.industry.hierarchy1
        this.dialogVisible = this.$store.state.session.account.isHwFirst
      })
    }
  }
</script>
<style lang="stylus" scoped>
.dialog-footer
  text-align center
.el-form-item
  position relative
.password-tip__span
  font-size 12px
  position absolute
  top -24px
  left 25px
  color #3b5998
.el-select
  width 100%
.tip
  margin 14px 0
  color #3b5998
.opcity__div
  opacity .5
.el-col
  height 72px
</style>
